<template>
	<div>
		<div class="banner" @click='handleBannerClick'>
			<img class="banner-img" :src="bannerImg" alt="">
			<div class="banner-info">
				<div class="number">
					<i class="iconfont">&#xe63d;</i>
					<span class="img-number">8</span>
				</div>
				<div class="banner-title">{{sightName}}</div>
			</div>
		</div>
		<common-gallery :imgs=gallaryImgs v-show=showGallery
		@close = 'handelGalleryClose'
		></common-gallery>
	</div>
</template>
<script>
	import CommonGallery from 'common/gallery/gallery.vue'
	export default{
		name:'DetailBanner',
		components:{
			CommonGallery
		},
		props:{
			bannerImg:{
				type:String
			},
			gallaryImgs:{
				type:Array
			},
			sightName:{
				type:String
			}
		},
		data(){
			return {
				showGallery:false
			}
		},
		methods:{
			handleBannerClick(){
				this.showGallery=true
			},
			handelGalleryClose(){
				this.showGallery=false
			}
		}
	}
</script>
<style lang="stylus" scoped>
	.banner{
		position: relative;
		overflow: hidden;
		height: 0;
		padding-bottom: 55%;
		width: 100%;
	}
	.banner-img{
		width: 100%;
	}
	.banner-info{
		position: absolute;
		left: 0;
		left: 0;
		bottom: 0;
		line-height: .6rem;
		font-size: .36rem
		color:#fff;
	}
	.number{
	    width: 1.2rem;
	    height: .4rem;
	    background: rgba(0,0,0,.5);
	    border-radius: .2rem;
	    font-size: .24rem;
	    color: #fff;
	    line-height: .4rem;
	    text-align: center;
	}
</style>